import React, { useMemo, useEffect, useState } from 'react';
import { Layout, Menu } from 'antd';
import styles from './index.less';
import autoRoute from '@/utils/auto';
import routes from '@/routes/routeConfig';
import { Link, history } from 'umi';

const { Sider } = Layout;

const PageSider: React.FC = () => {
  const [menuItem, setMenuItem] = useState<string[]>([]);

  useEffect(() => {
    history.listen((path) => {
      setMenuItem([path.pathname]);
    });
  }, []);

  const MenuDom = useMemo(
    () =>
      autoRoute(routes).map((item: any) => {
        return (
          <Menu.Item key={item.path} icon={item.icon}>
            <Link to={item.path}>{item.name}</Link>
          </Menu.Item>
        );
      }),
    [],
  );

  return (
    <Sider breakpoint="lg" collapsedWidth="60">
      <div className={styles.logo} />
      <Menu theme="dark" mode="inline" selectedKeys={menuItem}>
        {MenuDom}
      </Menu>
    </Sider>
  );
};
export default PageSider;
